<template>
  <section class="m-istyle">
    <dl @mouseover="over">
      <dt>乐鲜精选</dt>
      <dd :class="{ active: kind === 'all' }" kind="all" keyword="">
        全部
      </dd>
      <dd :class="{ active: kind === 'fruit' }" kind="fruit" keyword="水果">
        新鲜水果
      </dd>
      <dd :class="{ active: kind === 'sea' }" kind="sea" keyword="海鲜水产">
        海鲜水产
      </dd>
      <dd :class="{ active: kind === 'meat' }" kind="meat" keyword="精选肉类">
        精选肉类
      </dd>
      <dd
        :class="{ active: kind === 'vegetable' }"
        kind="vegetable"
        keyword="蔬菜"
      >
        蔬菜蛋品
      </dd>
    </dl>
    <ul class="ibody">
      <li v-for="item in cur" :key="item.title">
        <nuxt-link :to="{ path: 'detail', query: { id: item.id } }">
          <el-card :body-style="{ padding: '0px' }" shadow="never">
            <img :src="item.img" class="image" />
            <ul class="cbody">
              <li class="title">{{ item.title }}</li>
              <!-- <li class="pos"><span>{{ item.pos }}</span></li> -->
              <li class="price">
                ￥<em>{{ item.price }}</em
                ><span>/起</span>
              </li>
            </ul>
          </el-card>
        </nuxt-link>
      </li>
    </ul>
  </section>
</template>
<script>
import { simpleSearch } from "@/api/esproduct";
export default {
  data: () => {
    return {
      kind: "all",
      list: {
        all: [],
        fruit: [],
        sea: [],
        meat: [],
        vegetable: []
      }
    };
  },
  computed: {
    cur: function() {
      return this.list[this.kind];
    }
  },
  async mounted() {
    let self = this;
    const params = {
      pageNum: 0,
      pageSize: 10
    };
    let {
      status,
      data: {
        data: { total, list }
      }
    } = await simpleSearch(params);
    if (status === 200 && total > 0) {
      console.log(list);
      let r = list
        .filter(item => item.pic.length)
        .map(item => {
          return {
            id: item.id,
            title: item.name,
            //pos:item.type.split(';')[0],
            price: item.price || "暂无",
            img: item.pic.split(",")[0]
          };
        });
      self.list[self.kind] = r.slice(0, 8);
    } else {
      self.list[self.kind] = [];
    }
  },
  methods: {
    over: async function(e) {
      let dom = e.target;
      let tag = dom.tagName.toLowerCase();
      let self = this;
      let params = {};
      if (tag === "dd") {
        this.kind = dom.getAttribute("kind");
        let keyword = dom.getAttribute("keyword");
        if (keyword == "") {
          params = {
            pageNum: 0,
            pageSize: 10
          };
        } else {
          params = {
            pageNum: 0,
            pageSize: 10,
            keyword: keyword
          };
        }
        let {
          status,
          data: {
            data: { total, list }
          }
        } = await simpleSearch(params);
        if (status === 200 && total > 0) {
          let r = list
            .filter(item => item.pic.length)
            .map(item => {
              return {
                id: item.id,
                title: item.name,
                //pos:item.type.split(';')[0],
                price: item.price || "暂无",
                img: item.pic.split(",")[0]
              };
            });
          self.list[self.kind] = r.slice(0, 9);
        } else {
          self.list[self.kind] = [];
        }
      }
    }
  }
};
</script>
<style lang="scss">
@import "@/assets/css/index/artistic.scss";
</style>
